<style type="text/css">
    .action-cell {
        margin-bottom: 20px;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
        justify-content: space-between;
        align-items: center;
        margin-right: 20%;
    }

    .search-block {
        display: flex;
        margin-bottom: 10px;
    }

    .input-search {
        margin-right: 10px;
    }
</style>
<template>
    <div>
        <div class="action-cell">
            <div class="list-action-btn">
                <Button type="error" size="large" @click="jumpPage('','AmmunitionAdd')">添加物资分类</Button>
            </div>
        </div>
        <Table :context="self" :data="tableData" :columns="tableColumns" stripe border></Table>
        <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page :total="total" size="large" show-total :current="current" show-elevator show-sizer
                      @on-change="changePage"></Page>
            </div>
        </div>
        <!--添加-->
        <Modal v-model="addIsShow" title="出入库" ok-text="入库" cancel-text="出库" @on-ok="handleSubmit('formValidate',1)"
               @on-cancel="handleSubmit('formValidate',2)">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
                <Form-item label="进出库类型" prop="optype">
                    <i-select v-model="formValidate.optype" placeholder="请选择进出库类型">
                        <template v-for="(item,index) in inOutTypeArr">
                            <i-option :value="item.Value">{{item.Value}}</i-option>
                        </template>
                    </i-select>
                </Form-item>
                <Form-item label="数量" prop="count">
                    <i-input v-model="formValidate.count" placeholder="请输入出库或入库数量"></i-input>
                </Form-item>
                <Form-item label="备注说明" prop="comment">
                    <i-input v-model="formValidate.comment" placeholder="请输入备注说明"></i-input>
                </Form-item>
            </Form>
        </Modal>
    </div>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';

    export default {
        data() {
            return {
                self: this,
                tableData: [],
                //添加
                formValidate: {
                    //添加字段
                    count: '',
                    optype: '',
                    comment: '',
                },
                addIsShow: false,
                formaterialid: '',
                ruleValidate: {},
                total: 0,
                current: 1,
                tableColumns: [
                    {
                        title: '物资项名称',
                        key: 'Title',
                        align: 'center',
                        fixed: 'left',
                    },
                    {
                        title: '型号',
                        key: 'Serial',
                        align: 'center',
                    },
                    {
                        title: '规格',
                        key: 'Size',
                        align: 'center',
                    },
                    {
                        title: '厂商',
                        key: 'Vender',
                        align: 'center',
                    },
                    {
                        title: '采购源',
                        key: 'Byfrom',
                        align: 'center',
                    },
                    {
                        title: '采购源联系人',
                        key: 'Fromcontact',
                        align: 'center',
                    },
                    {
                        title: '采购源联系电话',
                        key: 'Fromphone',
                        align: 'center',
                    },
                    {
                        title: '分配的物资分类',
                        key: 'Fortype',
                        align: 'center',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        fixed: 'right',
                        render: (h, params) => {

                            return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        style: {
                                            'margin-right': '10px',
                                        },
                                        on: {
                                            click: () => {
                                                this.remove(params.row)
                                            }
                                        }
                                    }, '删除'),
                                    // h('Button', {
                                    //     props: {
                                    //         type: 'primary',
                                    //         size: 'small'
                                    //     },
                                    //     style: {
                                    //         'margin-right': '10px',
                                    //     },
                                    //     on: {
                                    //         click: () => {
                                    //             let that = this;
                                    //             this.jumpPage(params.row.Id, 'MaterialItemEdit', that.current, params.index);
                                    //         }
                                    //     }
                                    // }, '编辑'),
                                    h('Button', {
                                        props: {
                                            type: 'warning',
                                            size: 'small'
                                        },
                                        style: {
                                            'margin-right': '10px',
                                            'margin-top': '10px',
                                        },
                                        on: {
                                            click: () => {
                                                let that = this;
                                                this.outInChange(params);
                                            }
                                        }
                                    }, '出入库'),
                                ]
                            )

                        }
                    }
                ]
            }
        },
        mounted() {
            this.mockTableData();

        },
        components: {},
        methods: {
            handleSubmit(name,type) {
                let that = this;
                let model = this.$refs[name].model;
                that.$refs[name].validate((valid) => {
                    that.comfirmModifyPS(model,type);
                })


            },
            comfirmModifyPS: function (model,type) {
                let that = this;
                if(type == 2){
                    model.count = -(model.count )
                }else {}
                model.Formaterialid = this.formaterialid;
                model.foropid = '03508730-6f42-438d-b9e7-2465a9653519';
                let params = that.$qs.stringify(model);
                apiUtil.post(that, apiUtil.urls.MaterialIn, params, function (res) {
                    that.mockTableData();
                    that.addIsShow =false;
                });
            },
            outInChange: function (params) {
                this.formaterialid = params.row.Id;
                if (this.addIsShow) {
                    this.addIsShow = false;
                } else {
                    this.addIsShow = true;
                }
            },
            getInOutTypeArr: function () {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.InOutTypeList, params, function (res) {
                    that.$Loading.finish();
                    that.inOutTypeArr = res.Msg;

                    console.log('res:', res)
                });
            },
            //跳转
            jumpPage: function (id, url, curPage, index) {
                //跳转
                let route = '';
                if (id.length > 0) {
                    if (curPage && curPage > 0) {
                        route = {
                            path: url,
                            query: {
                                id: id,
                                curPage: curPage,
                                index: index
                            }
                        }
                    } else {
                        route = {
                            path: url,
                            query: {
                                id: id,
                            }
                        }
                    }

                } else {
                    route = {
                        path: url,
                    };
                }

                this.$router.push(route);
            },
            //列表总数据
            mockTableData() {
                let that = this;

                let para = {
                    currPage: this.current,
                    pageSize: 10,
                    typename:'弹药储备'
                };
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.MaterialList, params, function (res) {
                    that.$Loading.finish();
                    that.total = res.Msg.TotalPage;
                    that.current = res.Msg.CurrentPage;
                    that.tableData = res.Msg.Arrays;
                    that.getInOutTypeArr();
                    console.log('res:', res)
                });

            },

            //删除
            remove(param) {
                let self = this;
                let that = this;
                this.$Modal.confirm({
                    title: '用户信息',
                    content: `是否删除此记录`,
                    onOk: function () {
                        this.$Loading.start();
                        let para = {
                            id: param.Id,
                        };
                        let params = that.$qs.stringify(para);
                        apiUtil.post(that, apiUtil.urls.DelMaterialItem, params, function (res) {
                            that.mockTableData();
                        });
                    }
                })
            },
            //翻页
            changePage(row) {
                // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
                console.log("row", row);
                this.current = row;
                this.mockTableData();
            }
        },
    }
</script>